<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件生产制造看板</title>
    <link rel="stylesheet" type="text/css" href="css/component.css"/>
</head>
<body>
<div class="wrapper" style="color: white">
    <div class="headers">
        <div class="header-logo">
            <img src="img/LOGO.png"/>
        </div>

        <div class="header-title">
            <div>
                <div class="title-chinese">组 件 生 产 制 造 看 板</div>
                <div class="title-english">Component Production and Manufacturing Platfrom-PV</div>
            </div>
        </div>

        <div class="header-date">
            <dl>
                <dd class="date" id="time"></dd>
            </dl>
        </div>
    </div>
    <div>
        <div style="width: 24vw;height: 11vw;margin: auto;padding: auto">
            <div class="container_title" style="padding-top:2%">当日前6项不良/6 bad days ago</div>
            <div id="badAgo" style="height: 100%;width: 100%;"></div>
        </div>
    </div>
    <div>
        <div class="container_title" style="padding-top:1%">仪表盘/Instrument board</div>
        <div class="item_char">
            <div class="instrument" id="gauge1">
            </div>
            <div class="instrument" id="gauge2">
            </div>
            <div id="gauge3" style="width: 25%;height: 11vw;">
            </div>
        </div>
    </div>
    <div>
        <div class="container_title" style="padding-top:2%">减少碳排量/Reduction of carbon emissions</div>
        <ul>
            <li>

                <img src="img/battery/小树ICON.png" class="item_img">

                <div class="item_carbon">等效种植树木{{reduceCarbon}}棵</div>
            </li>
            <li>

                <img src="img/battery/煤矿ICON.png" class="item_img">

                <div class="item_carbon">等效种植树木{{reduceCarbon}}棵</div>
            </li>
            <li>

                <img src="img/battery/二氧化碳ICON.png" class="item_img">

                <div class="item_carbon">等效种植树木{{reduceCarbon}}棵</div>
            </li>
        </ul>

    </div>
    <div>
        <div class="container_title">产能趋势/Production capacity trends</div>
        <div id="production" style="height: 80%;width: 97%"></div>
    </div>
    <div>
        <div class="container_title">良率趋势/Trends in yield</div>
        <div id="yieldTrends" style="height: 80%;width: 100%"></div>
    </div>
    <div>
        <div class="container_title">功率正态分布/Power Normal Distribution</div>
        <div id="power" style="height: 80%;width: 100%"></div>
    </div>
    <div>
        <div class="container_title">碎片趋势/Debris trends</div>
        <div id="eta" style="height: 80%;width: 100%"></div>
    </div>
</div>

</body>
</html>
<script src="js/node_modules/jquery/dist/jquery.js"></script>
<script src="js/node_modules/vue/dist/vue.js"></script>
<script src="js/node_modules/echarts/dist/echarts.js"></script>
<script src="js/base.js"></script>
<script src="js/component.js"></script>
</body>
</html>